// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// 挂载模版//路由管理
import Vue from 'vue'
import App3 from './App'
import router from './router'
import Validator from 'vue-validator'

Vue.use(Validator)
Vue.config.productionTip = false
/* 注册全局组件1并验证 */
Vue.component('runoob', {
  // 声明 props
  props: {
    message: {
      type: String,
      required: true
    }
  },
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<h1>{{ message }}</h1>'
})
/* 注册全局组件2 */
Vue.component('todo-item', {
  // 声明 props
  props: ['todo'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<li>{{ todo.text }}</li>'
})
/* 注册全局组件 */
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  // 但是我们返回给每个组件的实例却引用了同一个 data 对象
  data: function () {
    return {
      counter: 0
    }
  }
})
/* 注册全局组件父子组件传值 */
Vue.component('simple', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  }
})
/* 注册全局组件父子组件双向绑定 */
Vue.component('my-comp', {
  template: '<div @click="increment">点我+1</div>',
  data: function () {
    return {copyFoo: this.foo}
  },
  props: ['foo'],
  methods: {
    increment: function () {
      this.$emit('update:foo', ++this.copyFoo)
    }
  }
})

function inte () {
  return new Vue({
    el: '#app',
    router,
    template: '<App3/>',
    components: {App3}
  })
}

inte()

